<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CampusNoticeboard - Group4 UniHub</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/components.css">
    <link rel="stylesheet" href="../styles/noticeboard.css">
</head>
<body>
    <div id="header">
        <app-header page-title="Campus Noticeboard"></app-header>
    </div>
    
    <div class="main-container">
        <div id="sidebar"></div>
        
        <div class="content">
            <div class="search-section">
                <div class="search-row">
                    <input type="text" id="searchInput" placeholder="Search notices...">
                    <button class="search-btn">Search</button>
                </div>
                <div class="filter-container">
                    <div class="filter-row">
                        <select class="filter-select category-select">
                            <option value="all">All Categories</option>
                            <option value="news">News</option>
                            <option value="activity">Activities</option>
                            <option value="notice">Notices</option>
                        </select>
                        <div class="filter-radio-group">
                            <label class="radio-label">
                                <input type="radio" name="filter" value="all" checked>
                                <span>All</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="filter" value="popular">
                                <span>Popular</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="filter" value="mypost">
                                <span>MyPosts</span>
                            </label>
                        </div>
                    </div>
                    <button class="post-btn" onclick="window.location.href='./post-notice.html'">
                        Create Post
                    </button>
                </div>
            </div>

            <div class="notice-list" id="noticeList">
                <!-- Notice list will be dynamically generated by JavaScript -->
            </div>
        </div>
    </div>

    <div id="footer"></div>

    <script src="../components/header.js"></script>
    <script type="module" src="../components/sidebar.js"></script>
    <script src="../components/footer.js"></script>
    <script type="module" src="../scripts/noticeboard.js"></script>
</body>
</html> 